<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<!--[if IE 8]>
<html id="ie8" lang="en">
<![endif]-->
<!--[if !(IE 8)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Draw Your Heart | Web App</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
margin: 0;
padding: 0;
font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif;
font-size: 12px;
font-weight: normal;
color: #222;
/*width: 100%;*/
height: 100%;
}
#mainContainer{
min-height:100%;
position:relative;
}
#header{
height:50px;
border-bottom:3px solid #b2b2b2;
/*background:#ccc;
background-image:url('assets/diagmonds.png');
background-repeat:repeat-x; */
background: #424242 none;
background: -webkit-gradient(linear,left top,left bottom,from(#505050),to(#343434));
background: -moz-linear-gradient(top,#505050,#343434);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF505050,endColorstr=#FF343434);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF505050, endColorstr=#FF343434)";
background: -ms-linear-gradient(top,#505050,#343434);
background: -o-linear-gradient(top,#505050,#343434);
}
#header span{
line-height:50px;
color: #fff;
font-size:18px;
font-weight:bold;
padding-left:20px;
}
#header span:hover{
color:#5BC1E0;
cursor:pointer;
}
#footer{
background:#303030;
border-top:3px solid #1c94c4;
color: #fff;
/*padding:10px;*/
width:100%;
height:30px;
position:absolute;
bottom:0;
left:0;
}
#footer p{
margin-top:6px;
}
#content{
/*width:100%;*/
padding-bottom:30px;   /* Height of the footer element */
}
#drawingCanvasHolder{
width:400px;
height:500px;
min-height:350px;
margin:30px auto;
padding:10px;
border: 1px solid #dddddd;
background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;
}
#paintBox{
background:#fff;
display:none;
}
.btnControls{
width:200px;
}
.sidebyside{
width:90px;
}
ul#contentLayout{
overflow:hidden;
width:980px;
margin:0 auto;
}
ul#contentLayout li{
float:left;
list-style:none;
}

ul.controlContainer{
padding:10px;
}
ul.controlContainer li{
list-style:none;
float:none !important;
}
ul.controlContainer li input
{
margin-bottom:10px;
}
#controls
{
padding:20px;
}
.collapsibleContainerContent
{
padding: 3px 15px;
display:none;
text-align:center;
}
.collapsibleContainer{
}
.brushSize ul{
overflow:hidden;
}
.brushSize ul li{
float:left !important;
list-style:none;
}

#helpContainer{
padding:30px;
}
#helpContainer ul li{
float:none;
margin-bottom:10px;
}

#header ul{
float:right;
margin-top:10px;
margin-right:10px;
}
#header ul li{
float:left;
list-style:none;
padding:5px;
}
#header ul li a{
color:#ccc;
text-decoration:none;
font-size:13px;
}
#header ul li a:hover{
color:#fff;
}
.btn{
cursor:pointer;
display: inline-block;
padding:4px 4px 4px 4px;
padding-left:15px;
padding-right:15px;
margin-bottom: 0;
font-family: "bariolregular","Helvetica neue",helvetica,sans-serif;
font-size: 13px;
font-weight: normal!important;
color: #949496;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
/*background-color: #f4f4f4;
background-image: -moz-linear-gradient(top,#f7f7f7,#efeff0);
background-image: -ms-linear-gradient(top,#f7f7f7,#efeff0);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#f7f7f7),to(#efeff0));
background-image: -webkit-linear-gradient(top,#f7f7f7,#efeff0);
background-image: -o-linear-gradient(top,#f7f7f7,#efeff0);
background-image: linear-gradient(top,#f7f7f7,#efeff0);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7',endColorstr='#efeff0',GradientType=0);
border-color: #efeff0 #efeff0 #c8c8cb;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); */
border: 1px solid #bfbfbf;
height:25px;
background: #f6f6f6 url(css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
}
.brushSizeBtnGroup{
overflow:hidden;
margin-top:5px;
display: inline-block;
}
.collapsibleContainer p{
text-align:center;
font-weight: bold;
color: #1c94c4;
font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
font-size: 1.1em;
}
.brushSizeBtnGroup>.btn{
float: left;
margin-left: -1px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.brushSizeBtnGroup>.btn:first-child{
margin-left: 0;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
}
.brushSizeBtnGroup>.btn:last-child{
webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
border-bottom-right-radius: 3px;
}
.btn.active{
border:1px solid #fbcb09;
background: #fdf5ce url(css/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.05);
}
.brushSizeBtnGroup .btn div{
line-height: 0;
}
.small{
background-color:#000;
width:7px;
height:7px;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}
.med{
background-color:#000;
width:11px;
height:11px;
border-radius: 11px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
}
.large{
background-color:#000;
width:15px;
height:15px;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
#doneBtn{
moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
background-color: #4daebf;
font-size: 14px;
padding: 5px 14px 5px;
color:#fff;
}
</style>
</head>
<body>
<div id="mainContainer">
    <div id="header">
        <span>Draw Your Heart</span>
        <ul>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
            <li>
                <a href="#">Credits</a>
            </li>
            <li>
                <a href="#">Visit Our Website</a>
            </li>
        </ul>
    </div>
    <div id="content">
        <ul id="contentLayout">
            <li>
                <div id="controls">
                    <ul class="controlContainer">
                        <li>
                            <input id="brushBtn" type="button" value="Brush" class="sidebyside">
                            <input id="paintBucketBtn" type="button" value="Paint Bucket">
                            <div class="collapsibleContainer" id="collapsibleContainer1">
                                <p>Choose Brush size</p>
                                <div class="brushSizeBtnGroup">
                                    <button class="btn active" id="small">
                                        <div class="small">&nbsp;</div>
                                    </button>
                                    <button class="btn" id="med">
                                        <div class="med">&nbsp;</div>
                                    </button>
                                    <button class="btn" id="large">
                                        <div class="large">&nbsp;</div>
                                    </button>
                                </div>
                            </div>
                        </li>
                        <li class="ui-state-default ui-corner-all" style="padding:10px 0 10px 10px; margin-bottom:10px;">
                            <div style="width:175px; height:10px; margin-bottom:10px; ">
                                <div id="preview" style="width:83px; height:10px; float:left; border:1px solid #9a9a9a;"></div>
                                <div id="pick" style="width:83px; height:10px; float:right; border:1px solid #9a9a9a;"></div>
                            </div>
                            <canvas id="colorPicker" width="175" height="140" style="border:1px solid #9a9a9a;">
                                HTML5 Canvas Not Supported
                            </canvas>
                        </li>
                        <li>
                            <input id="eraserBtn" type="button" value="Eraser" class="btnControls">
                            <div class="collapsibleContainer" id="collapsibleContainer3">
                                <p style="">Choose Eraser size</p>
                                <div class="brushSizeBtnGroup">
                                    <button class="btn active" id="eraserSmall">
                                        <div class="small">&nbsp;</div>
                                    </button>
                                    <button class="btn" id="eraserMed">
                                        <div class="med">&nbsp;</div>
                                    </button>
                                    <button class="btn" id="eraserLarge">
                                        <div class="large">&nbsp;</div>
                                    </button>
                                </div>
                            </div>
                        </li>
                        <li>
                            <input type="button" value="Clear All" id="clearBtn" class="btnControls"/>
                        </li>
                    </ul>
                    <!--<input type="button" value="Get Login Status" onclick="getLoginStatus()">-->
                </div>
            </li>
            <li>
                <div id="drawingCanvasHolder" class="ui-state-default ui-corner-all" style="background:#d9d8d8; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25);  border-bottom: 1px solid rgba(0,0,0,0.25);">
                    <canvas id="paintBox">
                        <p>Sorry, you need to have a browser that supports HTML5 Canvas</p>
                    </canvas>
                    <ul>
                        <li>
                            <p>When you are done click on the "Done" button</p>
                        </li>
                        <li>
                            <a type="button" id="doneBtn">Done</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li id="helpContainer">
                <ul>
                    <li class="ui-state-default ui-corner-all" title="Help" style="width:50px; text-align:center;">
                        <span class="ui-icon ui-icon-help"></span>
                        Help
                    </li>
                    <li>
                        <input type="button" value="Share Photo" id="sharePhotoFB" class="btnControls">
                    </li>
                    <li>
                        <button id="shareFBWall" class="btnControls">Share on Wall</button>
                    </li>
                    <li>
                        <input type="button" value="Facebook Logout" id="logoutFB" class="btnControls">
                    </li>
                    <li>
                        <input type="button" value="Share on Google+" class="btnControls">
                    </li>
                    <li>
                        <input type="button" value="Share on Twitter" class="btnControls">
                    </li>
                    <li>
                        <input type="button" value="Email" class="btnControls">
                    </li>
                    <li>
                        <input type="button" value="Save Drawing" class="btnControls">
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="footer">
        <p>Happy with the web app? Now try our mobile apps - Android | iPhone</p>
    </div>
</div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="paint_bucket1.js"></script>
<script type="text/javascript" src="app_jquery.js"></script>
</body>
</html>